<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
	<title>2. Hello World</title>
	<meta http-equiv="Content-Language" content="en-us">
  <link rel="stylesheet" type="text/css" href="../../style.css">
  <link rel="stylesheet" type="text/css" href="tutorial.css">
</head>
<body>

<div id="navigation">
<ul>
    <li><a href="tutorial.html">目录</a></li>
    <li><a href="tutorial1.html">上一节Previous</a></li>
    <li><a href="tutorial3.html">下一节Next</a></li>
</ul>
</div>

<h2>2. Hello World</h2>

<h3>2.1 <a name="Initialization">初始化Initialization</a></h3>

<p>下面代码展示如果创建IUP环境并展示简单消息.</p>

<p class="example_title">示例代码 
<span class="example_button">[in C] <a target="example2_1" href="../../examples/tutorial/example2_1.c">example2_1.c</a> <a href="../../examples/tutorial/example2_1.c">
<img alt="" src="download.png"></a></span> <span class="example_button">[in Lua] <a target="example2_1" href="../../examples/tutorial/example2_1.lua">example2_1.lua</a> <a href="../../examples/tutorial/example2_1.lua"><img alt="" src="download.png"></a></span></p>
<iframe src="../../examples/tutorial/example2_1.c" id="2_1" name="example2_1" marginheight="0" marginwidth="0" style="height: 15em">
</iframe>
<p class="example_image"><img alt="" src="example2_1.png"></p>

<p>c代码中第一行,加载基础的c标准库. 
   第二行,加载iup库. 
   接下来是main函数声明. 
   在运行任何IUP函数前,必须首先调用
<A href="../func/iupopen.html"><strong>IupOpen</strong></a>用来初始化IUP. 
   接下来一行调用<A href="../dlg/iupmessage.html"><strong>IupMessage</strong></a>函数像用户展示一个简单消息. 
   这个函数接受2个参数: title and message. 
   title作为窗口标题展示,
   message作为文本内容展示. 
   接着调用<A href="../func/iupclose.html"><strong>IupClose</strong></a>函数. 
   必须调用<A href="../func/iupclose.html"><strong>IupClose</strong></a>用来释放内存和关闭界面.
   最后返回成功退出. </p>

<p>lua代码使用<strong>require</strong>代替<strong>includes</strong>加载需要的iuplua扩展包package
在require加载中会自动调用<A href="../func/iupopen.html"><strong>IupOpen</strong></a>函数 
在lua中对应的使用"iup."代码IUPxx函数的调用,所以使用"iup.Message"代替<A href="../func/iupmessage.html"><strong>IupMessage</strong></a> 
"iup.Close"代替<A href="../func/iupclose.html"><strong>IupClose</strong></a>. 
另外lua文件不需要main函数,为了实现不同上下文都可以执行,通常使用
<A href="../func/iupmainlooplevel.html"><strong>iup.MainLoopLevel</strong></a>. 
检查<A href="../func/iupmainloop.html"><strong>iup.MainLoop</strong></a>是否已经启动. </p>


<h4>2.1.1 <a name="Compiling_Linking">编译</a>和链接</h4>

<p>编译和链接IUP库需要指定相应的 
<strong>include</strong>和<strong>libraries</strong>路径. 参考如下:
</p>

<pre class="example">gcc -o example2_1 example2_1.o -liupimglib -liup -L../../../lib/$TEC_UNAME</pre>

<p> 可以参考链接教程<a href="http://mrbook.org/blog/tutorials/make/">makefile tutorial</a>创建一个makefile文件用来管理项目工程). 
下面是相关的IDE配置教程:</p>
<ul>
	<li><a href="../ide_guide/cppbx.html">Borland C++ BuilderX</a></li>
	<li><a href="../ide_guide/codeblocks.html">Code Blocks</a></li>
	<li><a href="../ide_guide/codelite.html">CodeLite</a></li>
	<li><a href="../ide_guide/dev-cpp.html">Dev-C++</a> </li>
	<li><a href="../ide_guide/eclipse.html">Eclipse for C++</a></li>
	<li><a href="../ide_guide/msvc.html">Microsoft Visual C++</a> (Visual Studio 2003)</li>
	<li><a href="../ide_guide/msvc8.html">Microsoft Visual C++</a> (Visual Studio 2005)</li>
	<li><a href="../ide_guide/netbeans.html">NetBeans</a></li>
	<li><a href="../ide_guide/owc.html">Open Watcom</a></li>
</ul>
<p> 如果需要了更多静态链接的信息,可以参考<a href="../guide.html#apl">Building Applications Guide</a>. </p>

<h3>2.2 <a name="Dialog">创建一个窗口Creating a Dialog</a></h3>

<p>接下来添加代码实现创建对话窗口.
</p>

<p class="example_title">示例代码 
<span class="example_button">[in C] <a target="example2_2" href="../../examples/tutorial/example2_2.c">example2_2.c</a> <a href="../../examples/tutorial/example2_2.c">
<img alt="" src="download.png"></a></span> <span class="example_button">[in Lua] <a target="example2_2" href="../../examples/tutorial/example2_2.lua">example2_2.lua</a> <a href="../../examples/tutorial/example2_2.lua"><img alt="" src="download.png"></a></span></p>
<iframe src="../../examples/tutorial/example2_2.c" id="2_2" name="example2_2" marginheight="0" marginwidth="0" style="height: 23em">
</iframe>
<p class="example_image"><img src="example2_2.png"></p>

<p>c代码中首先声明2个Ihandles*变量 用来存储相关的内容.一个是<strong>dlg</strong>用来保存主窗口
另一个是<strong>label</strong>用来保存文本内容. 
接着创建一个label控件并赋值给Ihandle类型label.参数包含需要展示的文本内容.
然后创建一个主对话窗口,赋值给dlg.其参数是<A href="../dlg/iupdialog.html"><strong>IupDialog</strong></a>
用来进行布局管理实现垂直排列. 
然后调用<A href="../func/iupsetattribute.html"><strong>IupSetAttribute</strong></a>设置dlg的Title属性
接着调用<A href="../func/iupshowxy.html"><strong>IupShowXY</strong></a>表示显示的位置
然后执行<A href="../func/iupmainloop.html"><strong>IupMainLoop</strong></a>. 
表示循环等待事件.</p>

<p>所有的IUP都遵循如上的编程结构. </p>

<p>lua代码中,在加载完iuplua扩展包package后,创建了2个组件
这里的函数的参数使用一个tabel表示. 无需使用
<A href="../func/iupsetattribute.html"><strong>iup.SetAttribute</strong></a>. 
在lua中一个控件组织为一个带有属性和回调的table.
既可以在控件创建是赋值属性的值,也可以在创建后调用.属性进行修改.
lua中可以使用`:`代替`.`,具有相同的效果比如`dlg::showxy(iup.CENTER,iup.CENTER)`等价于
"iup.ShowXY(dlg, iup.CENTER,iup.CENTER)".</p>

<h3>2.3 <a name="Interaction">添加交互Adding Interaction</a></h3>

<p>接下来添加一个按钮并实现交互功能. 
</p>

<p class="example_title">示例代码
<span class="example_button">[in C] <a target="example2_3" href="../../examples/tutorial/example2_3.c">example2_3.c</a> <a href="../../examples/tutorial/example2_3.c">
<img alt="" src="download.png"></a></span> <span class="example_button">[in Lua] <a target="example2_3" href="../../examples/tutorial/example2_3.lua">example2_3.lua</a> <a href="../../examples/tutorial/example2_3.lua"><img alt="" src="download.png"></a></span></p>
<iframe src="../../examples/tutorial/example2_3.c" id="2_3" name="example2_3" marginheight="0" marginwidth="0" style="height: 36em">
</iframe>
<p class="example_image"><img src="example2_3.png"></p>

<p>代码中新添加了一个函数btn_exit_cb,并注册为回调函数
</p>

<p>这里为vbox单独声明了一个变量 
	第一个参数是title,第二个参数是NULL,已经废弃的参数
	然后将vbox传递给函数<A href="../dlg/iupdialog.html"><strong>IupDialog</strong></a>. 
</p>

<p>接下来就是回调函数注册,
	首先声明一个函数,
	然后注册为回调函数.</p>

<p>运行结果,点击button展示一段文字,然后关闭.
</p>

<p>Lua中只需要将回调函数注册为属性即可
<A href="../func/iupsetcallback.html"><strong>IupSetCallback</strong></a>. </p>

<h3>2.4 <a name="Adding_Layout_Elements">添加布局元素Adding Layout Elements</a></h3>

<p> 上面都是使用vbox进行布局管理的,IUP实现了一套抽象的布局机制. 
	布局组件会自动缩放.
</p>

<p>接下来使用更多的布局相关组件.</p>

<p class="example_title">Example Source Code 
<span class="example_button">[in C] <a target="example2_4" href="../../examples/tutorial/example2_4.c">example2_4.c</a> <a href="../../examples/tutorial/example2_4.c">
<img alt="" src="download.png"></a></span> <span class="example_button">[in Lua] <a target="example2_4" href="../../examples/tutorial/example2_4.lua">example2_4.lua</a> <a href="../../examples/tutorial/example2_4.lua"><img alt="" src="download.png"></a></span></p>
<iframe src="../../examples/tutorial/example2_4.c" id="2_4" name="example2_4" marginheight="0" marginwidth="0" style="height: 37em">
</iframe>
<p class="example_image"><img src="example2_4.png"></p>

<p>Note that there is a new <strong>label</strong> declaration and this new element 
appears inside our vbox as the top element.
That means it will be displayed above <strong>button</strong>, and that's all. Our example now has two
different elements and is disposed vertically one above the other. An interesting 
exercise would be to change the code above and use an hbox to see what happens.</p>

<p>In Lua we used a simpler way to associate a callback, using a Lua syntax 
sugar "button:exit_cb()". But to use this syntax, the button element must exist 
before the callback declaration, so we also moved its code to after the button 
construction.</p>

<h3>2.5 <a name="Improving_the_Layout">提升布局Improving the Layout</a></h3>

<p>接下来说明布局组件可以使用的3个重要属性: 
ALIGNMENT, GAP and MARGIN.</p>
<p>ALIGNMENT 描述了内部元素的对齐方式,hbox支持 "ALEFT", 
"ACENTER" or "ARIGHT" vbox支持"ATOP", "ACENTER" or 
"ABOTTOM".默认值时"ALEFT" and "ATOP".</p>

<p>GAP则描述元素之间的间隔,默认值是0.</p>

<p>MARGIN defines a margin in pixels. Its value has the format "widthxheight", in which width and height are integer values corresponding to the horizontal and vertical margins, respectively. 
Its default value is "0x0" (means no margin).</p>

<p>下面看看如何使用3个属性.</p>

<p>Notice that the Lua version of our example has only a few changes. We just add a line with the label creation and inserted it into the vbox a little further.</p>

<p class="example_title">Example Source Code 
<span class="example_button">[in C] <a target="example2_5" href="../../examples/tutorial/example2_5.c">example2_5.c</a> <a href="../../examples/tutorial/example2_5.c">
<img alt="" src="download.png"></a></span> <span class="example_button">[in Lua] <a target="example2_5" href="../../examples/tutorial/example2_5.lua">example2_5.lua</a> <a href="../../examples/tutorial/example2_5.lua"><img alt="" src="download.png"></a></span></p>
<iframe src="../../examples/tutorial/example2_5.c" id="2_5" name="example2_5" marginheight="0" marginwidth="0">
</iframe>
<p class="example_image"><img src="example2_5.png"></p>

<p>After creating the vbox, we have added three lines that set those attributes to 
values different than the default values. The result is much pleasanter to see. 
Although it is still not quite as the first example, which uses a pre-defined 
dialog. Can you figure out which attributes we need to set in order to obtain a more 
closer appearance?</p>
<p class="example_image"><a href="../../examples/tutorial/example2_5a.c">
<img src="example2_5a.png"></a></p>

<table cellpadding="0" cellspacing="0" style="width: 100%">
	<tr>
		<td align="left" class="tutorial_bottom"><a href="tutorial1.html">上一节</a></td>
		<td align="center" class="tutorial_bottom"><a href="tutorial.html">Index</a></td>
		<td align="right" class="tutorial_bottom"><a href="tutorial3.html">下一节</a></td>
	</tr>
</table>

</body>
</html>
